<!-- 结构 -->
<script setup lang="ts">

/**
 * 任何一个事件都有对应的事件对象
 * 事件对象：描述这个事件
 *
 * 1.如果没有实参传递，则直接定义形参接收
 * 2.如果有实参传递，实参用 $event ,形参用 e
 */
const toggle1 = (e: MouseEvent) => {
    console.log('点击了', e);
}

const toggle2 = (str: string, e: MouseEvent) => {
    console.log(str, e);
}

</script>

<!-- JS逻辑 -->
<template>
    <div class="app-page">

        <button @click="toggle1">切换1</button>
        <hr>
        <button @click="toggle2('happy', $event)">切换2</button>

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped>
.box {
    width: 200px;
    height: 200px;
    background-color: palevioletred;
}
</style>